/// 页面 * 树

<template>
  <Page>
    <button @click="onTreeEach">
      on tree each
    </button>
    <br>
    <button @click="onTreeFind">
      on tree find
    </button>
    <br>
    <button @click="onTreeMap">
      on tree map
    </button>
  </Page>
</template>

<script setup lang="ts">
const treeData = [
  {
    id: '1',
    name: 'Node 1',
    children: [
      {
        id: '1-1',
        name: 'Node 1-1',
        children: [
          {
            id: '1-1-1',
            name: 'Node 1-1-1',
          },
        ],
      },
      {
        id: '1-2',
        name: 'Node 1-2',
        children: [
          {
            id: '1-2-1',
            name: 'Node 1-2-1',
          },
          {
            id: '1-2-2',
            name: 'Node 1-2-2',
            children: [
              {
                id: '1-2-2-1',
                name: 'Node 1-2-2-1',
              },
              {
                id: '1-2-2-2',
                name: 'Node 1-2-2-2',
              },
              {
                id: '1-2-2-3',
                name: 'Node 1-2-2-3',
              },
              {
                id: '1-2-2-4',
                name: 'Node 1-2-2-4',
              },
            ],
          },
        ],
      },
    ],
  },
  {
    id: '2',
    name: 'Node 2',
  },
]

const onTreeEach = () => {
  treeEach(treeData, (node, pnode, info) => {
    console.log(`[${node.name}]`, `[${pnode?.name ?? 'Nil'}]`, info)
    // if (node.id === '1-2') {
    //   return false
    // }
  })
}

const onTreeFind = () => {
  const node = treeFind(treeData, (node) => {
    return node.id === '1-2-2'
  })
  console.log(node)
}

const onTreeMap = () => {
  console.log(
    treeMap(treeData, (node, pnode, info) => {
      console.log('#', node, pnode, info)
      ;(node as any).key = [
        `${pnode ? (pnode as any).key : ''}`,
        `${info.index + 1}`,
      ].filter(Boolean).join('_')
      return node
    }),
  )
}
</script>

<style scoped lang="scss">
</style>
